﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="pages/admin/commons/header :: header"></div>
<!--<link href="https://cdn.bootcss.com/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">-->
<!--<link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">-->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
<style>
    .curPage {
        color: red !important;
    }

    /* start 拿到bootstrap导航条样式*/

    .nav1 {
        margin-top: 2%;
    }

    .pagination > li {
        display: inline
    }

    .pagination > li > a, .pagination > li > span {
        position: relative;
        float: left;
        padding: 6px 12px;
        line-height: 1.42857143;
        text-decoration: none;
        color: #428bca;
        background-color: #fff;
        border: 1px solid #ddd;
        margin-left: -1px
    }

    .pagination > li:first-child > a, .pagination > li:first-child > span {
        margin-left: 0;
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px
    }

    .pagination > li:last-child > a, .pagination > li:last-child > span {
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px
    }

    .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
        color: #2a6496;
        background-color: #eee;
        border-color: #ddd
    }

    /* end 拿到bootstrap导航条样式*/

</style>
<body>
<div id="app">
    <div class="wap-container">
        <nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
            首页
            <span class="c-gray en">/</span>
            儿童保健
            <span class="c-gray en">/</span>
            基本资料(建档室)
            <a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px"
               href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
        </nav>
        <article class="Hui-admin-content clearfix">
            <div class="panel">
                <div>
                    <div class="panel-body">
                        <div class="row clearfix">
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="row clearfix mb-10">
                                    <span class="col-xs-4 form-item-label">档案号：</span>
                                    <span class="col-xs-8 form-item-control">
									<input type="text" name="searchDah" placeholder="档案号"
                                           class="input-text"/>
								</span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="row clearfix mb-10">
                                    <span class="col-xs-4 form-item-label">姓名：</span>
                                    <span class="col-xs-8 form-item-control">
									<input type="text" name="searchName" placeholder="姓名"
                                           class="input-text"/>
								</span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="row clearfix mb-10">
                                    <span class="col-xs-4 form-item-label">开始日期：</span>
                                    <span class="col-xs-8 form-item-control">
									<input type="text" name="start" id="search-datetime-start"
                                           class="input-text datetimepicker-input">
								</span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="row clearfix mb-10">
                                    <span class="col-xs-4 form-item-label">截止日期：</span>
                                    <span class="col-xs-8 form-item-control">
									<input type="text" name="end" id="search-datetime-end"
                                           class="input-text datetimepicker-input">
								</span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="row clearfix">
								<span class="col-xs-4 form-item-control">
									<button name="" id="search-submit" class="btn btn-success radius" type="submit"><i
                                            class="Hui-iconfont">&#xe665;</i> 查询</button>
								</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <div class="panel-body">
                <div class="clearfix">
                    <span style="display: contents"
                          class="f-r">共有数据：<strong id="allTotal"></strong> 条. 共 <strong id="countPage"></strong> 页. 当前第 <strong
                            id="number"></strong> 页.</span>
                    <a style="float: right; margin-right: 5%;" href="javascript:;" id="add_record"
                       class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加数据</a>

                    <!--						<span class="f-l">-->
                    <!--						<a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>-->
                    <!--						</span>-->
                </div>
                <div class="mt-20 clearfix">
                    <table id="data-table-list"
                           class="table table-border table-bordered table-bg table-hover table-sort" style="">
                        <thead>
                        <tr class="text-c">
                            <!--									<th width="25"><input type="checkbox" name="" value=""></th>-->
                            <th width="100">档案号</th>
                            <th width="60">姓名</th>
                            <th width="60">性别</th>
                            <th width="20">出生日期</th>
                            <th width="80">建党医生</th>
                            <th width="20">户籍情况</th>
                            <th width="120">操作</th>
                        </tr>
                        </thead>
                        <tbody id="nodeInfo" class="getData-list" data-currPage='1'>

                        </tbody>
                    </table>
                </div>
                <!--                分页导航-->
                <!-- 分页 -->
                <div class="row">
                    <div class="col-md-4 col-md-offset-2" id="nav-info"></div>
                    <div style="padding-left: 9%;margin-top: 2%" class="col-md-6 col-md-offset-7" id="nav-area"></div>
                </div>
            </div>

        </article>
    </div>
</div>
<div th:replace="pages/admin/commons/footer :: footer"></div>
<script type="text/javascript">

    var app = new Vue({
        el: "#app"
    })

    $(function () {
        runDatetimePicker(); // 实例化日期控件
        //查数据填表格
        fillTable(0);
        //添加记录
        $("#add_record").click(function () {
            member_add('添加', '/childhealth/basicData/data-upd?type=toAdd', '510')
        })

        //查数据填表格
        function fillTable(page, data) {
            $.ajax({
                url: "/childhealth/basicData/findBasicData?page=" + page,
                data: data,
                method: "POST",
                success: function (result) {
                    //解析显示表单数据
                    build_emps_table(result);
                    //解析分页条
                    build_search_page_nav(result);
                }
            })
        }

        //解析显示表单数据
        function build_emps_table(result) {
            $("#nodeInfo").empty();
            $("#allTotal").text(result.data.totalElements);
            $("#number").text(result.data.number + 1);
            $("#countPage").text(result.data.totalPages);
            $.each(result.data.content, function (index, item) {
                var tdDah = $("<td></td>").append(item.dah);
                var tdXm = $("<td></td>").append(item.xm);
                var tdXb = $("<td></td>").append(item.xb);
                var tdCsrq = $("<td></td>").append(item.csrq);
                var tdJdys = $("<td></td>").append(item.jdys);
                var tdHjqk = $("<td></td>").append(item.hjqk);
                var tdOther = $("<td></td>").append(
                    "<button uniqueId=" + item.id + " class=\"btn btn-danger radius delBtn\" type=\"button\"><i class=\"Hui-iconfont\"></i > 删除 </button>" +
                    "&nbsp;&nbsp;" +
                    "<button uniqueId=" + item.id + " class=\"btn btn-success radius updBtn\" type=\"button\"><i class=\"Hui-iconfont\"></i > 修改 </button>");
                $("<tr></tr>").append(tdDah).append(tdXm).append(tdXb).append(tdCsrq).append(tdJdys).append(tdHjqk).append(tdOther).appendTo("#nodeInfo");
            });

            //删除
            $(".delBtn").on('click', function () {
                var uniqueId = $(this).attr("uniqueId");
                layer.confirm('是否确定删除: ' + $(this).parent().parent().find('td').eq(1).text() + ' ？', {
                    btn: ['删除', '取消'] //按钮
                }, function () {

                    $.ajax({
                        type: "post",
                        url: "/childhealth/basicData/data-del",
                        data: {"id": uniqueId},
                        success: function (result) {
                            console.log(result);
                            if (result.code == 0) {
                                layer.msg('删除成功！', {icon: 1});
                                fillTable(0);
                            } else {
                                layer.msg('删除失败！', {icon: 5});
                            }

                        }
                    })

                });

            })


            //修改
            $(".updBtn").on('click', function () {
                member_add('修改', '/childhealth/basicData/data-upd?type=toUpd&id=' + $(this).attr("uniqueId"), '', '510')
            })

        }

        //解析显示分页条
        function build_search_page_nav(result) {
            $("#nav-area").empty();
            var ul = $("<ul id='test'></ul>").addClass("pagination");
            var navigatepageNums = result.data.totalPages;
            var firstPageLi = $("<li></li>").append(
                $("<a></a>").append("首页").attr("href", "#"));

            firstPageLi.click(function () {
                fillTable(0);
            })

            var prePageLi = $("<li></li>").append(
                $("<a></a>").append("&laquo;"));

            prePageLi.click(function () {
                fillTable(result.data.number - 1);
            })


            var nextPageLi = $("<li></li>").append(
                $("<a></a>").append("&raquo;"));

            nextPageLi.click(function () {
                if (result.data.number + 2 > result.data.totalPages) {
                    fillTable(result.data.totalPages - 1);
                } else {
                    fillTable(result.data.number + 1);
                }

            })

            var lastPageLi = $("<li></li>").append(
                $("<a></a>").append("末页").attr("href", "#"));

            lastPageLi.click(function () {
                fillTable(result.data.totalPages - 1);
            })

            ul.append(firstPageLi).append(prePageLi);
            var x = result.data.number;
            var list = [x - 2, x - 1, x, x + 1, x + 2];


            for (var j = 0; j < list.length; j++) {
                //判断显示分页按钮
                if (list[j + 1] <= 0 || list[j] >= result.data.totalPages) {
                    continue;
                }

                numLi = $("<li></li>").append($("<a></a>").append(list[j] + 1));
                $(numLi).attr("uniqueId", list[j]);
                numLi.click(function () {
                    // alert($(this).attr("uniqueId"));
                    fillTable($(this).attr("uniqueId"));
                })

                if (result.data.number == list[j]) {
                    numLi.find("a").addClass('curPage');
                }
                ul.append(numLi);
            }

            // list.forEach(function (value) {
            //
            //
            // })

            ul.append(nextPageLi).append(lastPageLi);
            $("<nav></nav>").append(ul).appendTo("#nav-area");

        }

        //分页
        /*
         <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                  <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
        * */

        $("#search-submit").click(function () {
            var searchDah = $("[name=searchDah]").val();
            var searchName = $("[name=searchName]").val();
            var start = $("[name=start]").val();
            var end = $("[name=end]").val();
            var data = {
                searchDah: searchDah,
                searchName: searchName,
                start: start,
                end: end
            }
            fillTable('', data);
        })
    });
</script>
</body>
</html>
